<template>
    <div class="pjt-mt-report-detail-view">

      <modules-title class="title-position" titleName="报告详情">

        <template slot="btn">
          <el-button plain @click="backClick" size="mini">返回</el-button>
          <el-button
            v-hasPermi="{
                  v: ['xiangmu:baogao:comments'],
                  isF: isComment,
                }"
            type="primary" size="mini" @click="confirm" >评论</el-button>
        </template>

      </modules-title>

      <div class="pj-content">


        <el-card>
          <el-form ref="form" :model="datas" label-width="150px">
            <el-row style="display: flex">
              <el-col :span="8">
                <el-form-item label="报告人员">
                  <span>{{datas.creator_name}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报告类型">
                  <span v-if="datas.report_type == 'week'">周报</span>
                  <span v-else>月报</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报告周期" v-if="datas.report_type == 'week'">
                  <el-date-picker
                    readonly
                    disabled
                    v-model="datas.period"
                    type="week"
                    format="yyyy 第 WW 周"
                    placeholder="选择周">
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="报告月" v-else>
                  <el-date-picker
                    readonly
                    disabled
                    v-model="datas.period"
                    type="month"
                    placeholder="选择月">
                  </el-date-picker>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="所属项目">
                  <span>{{datas.project_name}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="提交时间">
                  <span>{{datas.created_at}}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="本周项目任务" v-if="datas.report_type == 'week'">


              <el-table
                v-if="datas.tasks.length"
                :data="datas.tasks"
                border
                style="width: calc( 100% - 1px )">
                <el-table-column
                  prop="task_name"
                  align="center"
                  label="任务名称">
                </el-table-column>
                <el-table-column
                  prop="status"
                  align="center"
                  label="任务状态"
                  width="200">
                  <template slot-scope="scope">

                    <div v-if="scope.row.status == 0">未启动</div>
                    <div v-else-if="scope.row.status == 1">进行中</div>
                    <div v-else-if="scope.row.status == 2">暂停</div>
                    <div v-else-if="scope.row.status == 3">延期</div>
                    <div v-else-if="scope.row.status == 4">待验收</div>
                    <div v-else-if="scope.row.status == 5">验收不通过</div>
                    <div v-else-if="scope.row.status == 6">已完成</div>
                    <div v-else-if="scope.row.status == 7">已终止</div>
                    <div v-if="scope.row.delay_day" style="color: red">(延期{{scope.row.delay_day}}天)</div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="任务进度"
                  align="center"
                  width="150">
                  <template slot-scope="scope">
                    <span>{{scope.row.task_progress}}%</span>
                  </template>
                </el-table-column>
              </el-table>

            </el-form-item>

            <el-form-item :label="datas.report_type == 'week' ? '本周工作计划' : '本月工作计划'">

              <span>{{datas.plan?datas.plan:'无'}}</span>

            </el-form-item>

            <el-form-item :label="datas.report_type == 'week' ? '本周工作总结' : '本月工作总结'">

              <span>{{datas.summary?datas.summary:'无'}}</span>

            </el-form-item>

            <el-form-item label="存在问题">

              <span>{{datas.problem?datas.problem:'无'}}</span>

            </el-form-item>

            <el-form-item label="需协调和帮助">

              <span>{{datas.help?datas.help:'无'}}</span>

            </el-form-item>

            <el-form-item :label="datas.report_type == 'week' ? '下周工作计划' : '下月工作计划'">

              <span>{{datas.next_plan?datas.next_plan:'无'}}</span>

            </el-form-item>

            <el-form-item label="附件">
              <file-preview :file-list="datas.files? datas.files : []" />
            </el-form-item>

          </el-form>
        </el-card>

        <el-card class="box-card" v-if="datas.comment && datas.comment.length">

          <div class="report-item" v-for="(item,index) in datas.comment">
            <div class="item-left">
              <el-avatar shape="square" :size="50" :src="squareUrl">{{item.creator_name}}</el-avatar>
            </div>

            <div class="item-right">

              <div class="item-right-top">

                <span class="name">{{item.creator_name}}</span>
                <span class="date">{{item.created_at}}</span>

              </div>

              <div class="item-right-content">
                <span>{{item.info}}</span>
              </div>

            </div>

          </div>

        </el-card>


      </div>

      <el-dialog
        v-if="dialogVisible"
        title="发表评论"
        :visible.sync="dialogVisible"
        width="600px"
        append-to-body
        :before-close="dialogClose">

        <div class="comment-view" style="display: flex">

          <span class="title" style="min-width: max-content;margin-right: 10px">评论内容</span>

          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>

        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogConfirm">确 定</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "index",
        data:function () {
            return{
                dialogVisible:false,
                textarea:'',
                squareUrl:'',
                datas:{
                    type:1,
                },
                isComment:false,
            }
        },
        mounted:function() {
            if (this.$route.query.id){
                this.getData(this.$route.query.id)
            }
        },
        methods:{
            checkComment:function(){
                let index = this.datas.member_id.findIndex(id=>id==this.$store.getters.userInfo.user.id)
                if (index != -1){
                    if (this.datas.comment){
                        let ind = this.datas.comment.findIndex(a=>a.creator_id == this.$store.getters.userInfo.user.id)
                        if (ind != -1){
                            this.isComment = false
                        }else{
                            this.isComment = true
                        }
                    }else{
                        this.isComment = true
                    }

                }else {
                    this.isComment = false
                }
            },
            getData:function(id){
                this.$api.PROJECT_START_WORK_REPORT_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.datas = res.data;
                        this.checkComment()
                    }
                }).catch(err=>{})
            },
            backClick:function () {
                this.$router.back()
            },
            confirm:function () {
                this.dialogVisible = true;
            },
            dialogClose:function () {

                this.dialogVisible = false;
            },
            dialogConfirm:function () {
                console.log(this.textarea)

                if (!this.textarea){
                    this.$message.error("请输入评论")
                    return
                }
                this.dialogVisible = false;
                let data = {
                    report_id:this.datas.id,
                    info:this.textarea
                }
                this.$api.PROJECT_START_WORK_REPORT_CREATE_COMMENT(data).then(res=>{
                    this.textarea = '';
                    if (res.code == 200){
                        this.getData(this.datas.id)
                        this.$route.params.refresh = true
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err={

                })
            }
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/views/projectManagement/report/detail.scss";
</style>
